<template>
  <Card title="医废合同签订情况" :loading="loading">
    <div style="text-align: right; font-size: 26px"> 总数: {{ props.res.data?.sumQty || 0 }} </div>
    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  // import { getConstractCensus} from '/@/api/sys/desktop';

  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '350px',
    },
    res: {
      type: Object,
      default: {
        data: {},
      },
    },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  watch(
    () => [props.loading, props.res],
    () => {
      if (props.loading) {
        return;
      }
      handleData();
    },
    { immediate: true },
  );

  async function handleData() {
    // const res = await getConstractCensus();
    setOptions({
      tooltip: {
        trigger: 'item',
      },
      legend: {
        data: ['生效中', '已过期'],
      },
      series: [
        {
          name: '合同签订情况',
          type: 'pie',
          radius: '80%',
          center: ['50%', '50%'],
          color: ['#009688', '#ff9f7f'],
          data: [
            { value: props.res.data.sxzQty, name: '生效中' },
            { value: props.res.data.ygqQty, name: '已过期' },
          ],
          roseType: 'radius',
          animationType: 'scale',
          animationEasing: 'exponentialInOut',
          animationDelay: function () {
            return Math.random() * 400;
          },
          label: {
            formatter: '{name|{b}} ({time|{c}})',
            rich: {
              time: {
                color: '#999',
              },
            },
          },
        },
      ],
    });
  }
</script>
